<template>
  <div>
    <div style="height: 30px;">
      <div class="message">
        <el-radio></el-radio>观众回访
      </div>
    </div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-row style="margin-top: 15px;">
        <el-form-item>
          <el-select placeholder="请选择展会" v-model="state.dataForm.tid2" clearable filterable
            @change="handleExhibitionChange">
            <el-option v-for="option in templates" :key="option.id" :label="option.template"
              :value="option.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="请选择历史展会" v-model="state.dataForm.historySelectedId" clearable filterable
            style="width: 200px;" @change="handleHistoryExhibitionChange">
            <el-option v-for="option in history" :key="option.id" :label="option.template"
              :value="option.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="state.getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item v-if="state.hasPermission('audience:followup:save')">
          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
        </el-form-item>
      </el-row>
      <!-- 观众回访 -->
      <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }" center
        v-loading="state.dataListLoading" :data="state.dataList" border
        @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
        <el-table-column align="center" prop="id" label="ID" width="90" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="tskName" label="任务名称" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="creator" label="创建人" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" width="220"
          show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="totalCount" label="总数量" width="140"
          show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="pendingCount" label="待处理数量" width="140"
          show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="finishRate" :label="finishRateLabel" width="120" show-overflow-tooltip>
          <template v-slot="{ row }">
            {{ row.finishRate != 0 ? row.finishRate + '%' : '0%' }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="400"
          show-overflow-tooltip>
          <template v-slot="scope">
            <el-button :disabled="scope.row.pendingCount === 0 && state.hasPermission('crm:crmperson:contactCenter')"
              v-if="state.hasPermission('audience:followup:list')" type="primary"
              @click="enterCenter(scope.row.id, state.dataForm.tid)">进入回访列表
            </el-button>
            <el-button v-if="state.hasPermission('audience:followup:redistribution')" type="success">重新分配</el-button>
            <el-button v-if="state.hasPermission('audience:followup:update')" type="success"
              @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
            <el-button v-if="state.hasPermission('audience:followup:delete')" type="danger"
              @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 25, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="refreshDataList"></add-or-update>
  </div>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, onMounted, reactive, ref, toRefs, } from "vue";
import AddOrUpdate from "./nocaudience-followup-add-or-update.vue";
import baseService from "@/service/baseService";
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const view = reactive({
  getDataListURL: '/noc/nocrepaytask/page',
  getDataListIsPage: true,
  deleteURL: "/noc/nocrepaytask",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    isNeedExhId: 1, // 传1根据当前展会过滤，传0不过滤
    tid: "" as any,
    tid2: "" as any,
    historySelectedId: "" as any,
  },
  templates: [],
  typeList: [1, 6, 7, 3],
});

const init = () => {
  getFinishRate()
  getTemplates()
  getHistory()
};

/**
 * 跳转到呼叫中心页面
 */
const router = useRouter();
const enterCenter = (row: any,tid:any) => {
  router.push({
    path: "/noc/noc-followup-list",
    query: {
      id: row,
      tid:state.dataForm.tid
    }
  });
};


//选择展会
const handleExhibitionChange = (tid: number) => {
  state.dataForm.tid = tid;
  state.dataForm.historySelectedId = null;
};

//选择历史展会
const handleHistoryExhibitionChange = (tid: number) => {
  state.dataForm.tid = tid;
  state.dataForm.tid2 = null;
}


//展会名称列表
const templates = ref<any[]>([]);
const getTemplates = () => {
  baseService.get('/crm/noctemplate/list', { limit: 300 }).then((res) => {
    if (res.code == 0) {
      //刷新
      templates.value = res.data;
    }
  });
};

//历史展会名称列表
const history = ref<any[]>([]);
const getHistory = () => {
  baseService.get('/crm/noctemplate/listExpireByRole').then((res) => {
    if (res.code == 0) {
      //刷新
      history.value = res.data;
    }
  });
};

/**
 * 判断负责人
 */
const finishRateLabel = ref('我的完成率');

const getFinishRate = () => {
  baseService.post("/sys/user/getLeaderList", { typeList: state.typeList.join(), isUserNeedExhId: 1 })
  finishRateLabel.value = '任务完成率';
};

//新增
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id, state.dataForm);
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

//刷新数据
const refreshDataList = () => {
  state.refreshDataList();
};

//页面进入执行
init();

</script>

<style lang="scss" scoped>
.message {
  float: left;
  font-size: 16px;
  font-weight: 600;
}

::v-deep .el-table .cell {
  white-space: nowrap;
}
</style>
